<template>
  <div>
    <!-- 二级路由出口   子路由出口 -->
    <router-view></router-view>
    <div class="navs">
      <RouterLink to="/home/Article">
        <div>
          <van-icon name="fire-o" />
          <div>面经</div>
        </div>
      </RouterLink>
      <RouterLink to="/home/Collect">
        <div>
          <van-icon name="star-o" />
          <div>收藏</div>
        </div>
      </RouterLink>
      <RouterLink to="/home/User">
        <div>
          <van-icon name="like-o" />
          <div>喜欢</div>
        </div>
      </RouterLink>
      <RouterLink to="/home/Like">
        <div>
          <van-icon name="user-o" />
          <div>我的</div>
        </div></RouterLink
      >
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.navs {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: pink;
  a {
    text-decoration: none;
    color: #6d707c;
  }
  a.active {
    color: #fa6d1d;
  }
}
</style>
